<!DOCTYPE  html>
<html>

<head>
<!--  <meta  charset="utf-8">
<meta  name="viewport"  content="width=device-width,  initial-scale=1,maximum-scale=1,user-scalable=no">
<meta  name="apple-mobile-web-app-capable"  content="yes">  -->
  <meta  http-equiv="X-UA-Compatible"  content="ie=edge">
        <meta  charset="UTF-8">
        <meta  name="viewport"  content="width=device-width,  initial-scale=1,  user-scalable=no"  />
        <meta  name="format-detection"content="telephone=no,  email=no"  />
        <meta  name="apple-mobile-web-app-capable"  content="yes"  /><!--  删除苹果默认的工具栏和菜单栏  -->
        <meta  name="apple-mobile-web-app-status-bar-style"  content="black"  /><!--  设置苹果工具栏颜色  -->
        <meta  name=”renderer”  content="ie-comp">
        <meta  name=”renderer”  content=”ie-stand”>
        <meta  name="renderer"  content="webkit">  
        <meta  name="keywords"  content="耀盛中国,耀盛智投,理财产品,智选财富,耀盛智投官网"/>
        <meta  name="description"  content="耀盛智投为耀盛中国旗下理财产品智选平台。专注于为大众富裕阶层、精英个人、中产阶级家庭、合规机构等提供定制化资产配置咨询推荐服务，帮助客户实现财富的增值。"  />
        <title>产品列表</title>
        <script  src="../lib/js/ftSize.js"></script>
        <link  rel="stylesheet"  href="../lib/css/_base.css">
         <link  rel="stylesheet"  type="text/css"  href="../lib/css/p_index.css">
        <link  rel="stylesheet"  href="../lib/css/mescroll.min.css">
        <link  rel="stylesheet"  href="../lib/css/swiper-3.3.1.min.css">
        <script>
            let wpuserToken=window.sessionStorage.getItem('wpuserToken');
            function goMine(){
                if(wpuserToken=='' || wpuserToken==null){
                    window.location.href="../login/login.html"
                }else{
                    window.location.href="../mine/index.html"
                }
            } 
        </script>
<style  type="text/css">

.header{
background:  #fff;
}
.P_top,.scrollx{
border-bottom:  1px  solid  #EBEBEB;
background:  #fff;
}
/*菜单*/
.scrollx{
height:  0.9rem;
overflow:  hidden;
}
.scrollx-content{
width:  100%;
overflow-x:  auto;
white-space:  nowrap;
overflow-y:  hidden;
}
.nav  {
padding:  0  0.16rem  0  0.2rem;
height:  0.9rem;

}
.nav  li{
display:  inline-block;
font-size:.3rem;
height:  0.6rem;

vertical-align:  middle;
}
.nav  .active{
color:  #AE915F;
}
/*列表*/
.swiper-container{
position:  fixed;
top:  2rem;
left:  0;
right:  0;
bottom:  0;
}

.data-list{
padding:  0  0.35rem;
}
.data-list  .pd-name{
font-size:  16px;
line-height:  20px;
height:  40px;
overflow:  hidden;
}
.data-list  .pd-price{
margin-top:  8px;
color:  red;
}
.data-list  .pd-sold{
font-size:  12px;
margin-top:  8px;
color:  gray;
}
/*隐藏*/
.hide{display:  none;}
.mescroll-totop  {
        z-index:  9990;
        position:  fixed;
        right:  0.1rem;
        bottom: 2rem;
        width: 0.72rem;
        height: 0.72rem;
        border-radius: 50%;
        opacity: 0;
}
.mescroll-upwarp{
    min-height: 0.30rem!important;
    padding:0 0 1rem 0!important; 
}

</style>
</head>

<body>
<!--标题-->
<div class="header">
<ul class="P_top" id="productStyle"> 
                <li><span >网贷</span></li>
                <li><span>保险</span></li>
            </ul>
             <!-- projectBanner区域 -->
            <p class="P_title" id="product-credit-banner">
                网贷产品由耀盛中国旗下平台九斗鱼提供 
            </p>
            <!-- inseranceBanner区域 -->
        <div class="scrollx mescroll-touch-x" id="insuranceBanner">
            <div id="scrollxContent" class="scrollx-content">
                <ul id="nav" class="nav">
                    <li class="active" i="0">全部</li>
                    <li i="1">大病险</li>
                    <li i="2">医疗险</li>
                    <li i="3">航旅险</li>
                    <li i="4">意外险</li>
                    <li i="5">寿险</li>
                    <li i="6">理财</li>
                    <li i="7" style="padding:0 0.2rem 0 0rem">特色</li>
                </ul>
            </div>
        </div>
        </div>
        <!-- 网贷 -->
        <section class="home-setions P_list product-main" id="product-credit-business">
            <ul class="P_list_ul" id="product-list-page">
            </ul>
        </section>
<!--保险-->
<div id="swiper" class="swiper-container">
    <div id="swiperWrapper" class="swiper-wrapper">
            <!--全部-->
        <div id="mescroll0" class="swiper-slide mescroll">
<div id="dataList0" class="data-list">
</div>
        </div>
            <!--大病险-->
        <div id="mescroll1" class="swiper-slide mescroll">
<div id="dataList1" class="data-list"> </div>
        </div>
            <!--医疗险-->
        <div id="mescroll2" class="swiper-slide mescroll">
<div id="dataList2" class="data-list"> </div>
        </div>
            <!--航旅险-->
        <div id="mescroll3" class="swiper-slide mescroll">
<div id="dataList3" class="data-list"> </div>
        </div>
            <!--意外险-->
        <div id="mescroll4" class="swiper-slide mescroll">
<div id="dataList4" class="data-list"> </div>
        </div>
            <!--寿险-->
        <div id="mescroll5" class="swiper-slide mescroll">
<div id="dataList5" class="data-list"> </div>
        </div>
            <!--理财-->
        <div id="mescroll6" class="swiper-slide mescroll">
<div id="dataList6" class="data-list"> </div>
        </div>
            <!--特色-->
        <div id="mescroll7" class="swiper-slide mescroll">
<div id="dataList7" class="data-list"> </div>
        </div>          
    </div>
</div>
<footer id="footer" style="display:block;">
            <div class="footerActive" id="foot-body"> 
                <a href="../home/index.html"> <i id="startPage"></i><small>首页</small></a>
                <a href="../productList/index.html" class="iconActive"><i id="centerPage"></i><small>产品列表</small></a>
                <a href="javascript:;" onClick="goMine()"><i id="endPage"></i><small>我的</small></a></div>
        </footer>
</body>
<script src="../lib/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../lib/js/iscroll.js"></script>
<script src="../lib/js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/js/swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--mescroll本身不依赖jq,这里为了模拟发送ajax请求-->
<script src="../lib/js/public-header.js"></script> 

<script type="text/javascript" charset="utf-8">
    
    
   



 /* 网贷传递的数据 */
    function grabLoanJson() {
        var json = {
            "token":" ",
            "clientInfo":"W,100,IE8",
            "requestTime": formatDateTime(startTime),
            "faceCode":"project/grabLoan",
            "body":{"type":"2"},
        }
        return json;
    }
    /* 保险传递的数据 */
    /* 网贷 */
    $('#product-list-page').html(`<p id="projectAlert">正在加载中，请稍候...</p>`)
    $.ajax({  
        type: "POST",
        url: httpServer+"project/grabLoan",
        headers:{
            'Access-Control-Allow-Origin':'*'
        }, 
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(grabLoanJson()),
        dataType: "json",
        success: function (creditShow) {
            if(creditShow.resCode!='0'){
                oneError(creditShow)
            }else{
                var creditList=''
                if(creditShow.body!=[]){
                    creditShow=creditShow.body
                    $.each(creditShow,function(ids,ele){
                        let baserateEm=''
                        if(ele.afterRate=='0.00'){
                            baserateEm=''
                        }else{
                            baserateEm=`<em class="credit-home-afterBase">+`+ele.afterRate+`%</em>`;
                        }
                        creditList+=`<a href="`+ele.jumpUrl+`"><li>
                                <div class="credit-home-title"> `+ele.projectName+`</div>
                                <div class="credit-home-left">
                                    <span class="credit-home-rate block">
                                        <em class="credit-home-baseBase">`+ele.baseRate+`%</em>`+baserateEm+`
                                    </span>
                                    <span class="credit-home-borrow block">
                                        借款利率
                                    </span>
                                </div>
                                <div class="credit-home-right">
                                    <span class="creadit-home-limit block">
                                            项目期限 `+ele.formatInvestTime+ele.investTimeUnit+`
                                    </span>
                                    <span class="credit-home-means block">
                                            `+ele.refundTypeNote+`
                                    </span>
                                </div>
                            </li></a>`;
                            
                    })
                    $('#product-list-page').html(creditList)
                }else{
                }  
            } 
        },
        error: function(error){  
        console.log(error,2);  
        }    
    }); 





 /*保险------------- */          
//导航菜单
var mescrollArr=new Array(12);//每个菜单对应一个mescroll对象
//当前菜单下标
var curNavIndex=0;
//初始化首页
mescrollArr[curNavIndex]=initMescroll(curNavIndex);
/*初始化轮播*/
var swiper=new Swiper('#swiper', {
        onTransitionEnd: function(swiper){
            var i=swiper.activeIndex;//轮播切换完毕的事件
            changePage(i);
    }
    });
     function insuranceJson(type,Page,pageSize) {
            var json = {
                "faceCode":"insurance/list",
                "token":"",    
                "clientInfo":"W,100,IE8",  
                "requestTime": formatDateTime(startTime),
                "body":{
                    "type":type,
                    "pageNow":Page,
                    "pageSize":pageSize
                }
            }
            return json;
        }
    /*菜单点击事件*/
$("#nav li").click(function(){
    
    var i=Number($(this).attr("i"));
    // alert(i);
    swiper.slideTo(i);//以轮播的方式切换列表
})

/*切换列表*/
function changePage(i) {
    if(curNavIndex!=i) {
    //更改列表条件
    var curNavDom;//当前菜单项
    $("#nav li").each(function(n,dom){
    if (dom.getAttribute("i")==i) {
        dom.classList.add("active");
        curNavDom=dom;
    } else{
        dom.classList.remove("active");
    }
});
//菜单项居中动画
var scrollxContent=document.getElementById("scrollxContent");
var star = scrollxContent.scrollLeft;//当前位置
var end = curNavDom.offsetLeft + curNavDom.clientWidth/2 - document.body.clientWidth/2; //居中
mescrollArr[curNavIndex].getStep(star, end, function(step,timer){
scrollxContent.scrollLeft=step; 
});
//隐藏当前回到顶部按钮
mescrollArr[curNavIndex].hideTopBtn();
if(mescrollArr[i]==null){
mescrollArr[i]=initMescroll(i);
}else{
var curMescroll=mescrollArr[i];
var curScrollTop=curMescroll.getScrollTop();
if(curScrollTop>=curMescroll.optUp.toTop.offset){
curMescroll.showTopBtn();
}else{
curMescroll.hideTopBtn();
}
}
curNavIndex=i;
}
}
/*创建MeScroll对象*/
function initMescroll(index){
//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
var mescroll = new MeScroll("mescroll"+index, {
//上拉加载的配置项
up: {
callback: getListData,
isBounce: false, 
noMoreSize: 4, 
empty: {
icon: "../lib/images/myriad.png", //图标,默认null
tip: "暂无相关数据~", //提示
btntext: "去逛逛 >", //按钮,默认""
btnClick: function(){//点击按钮的回调,默认null
//alert("点击了按钮,具体逻辑自行实现");
} 
},
clearEmptyId: "dataList"+index,
toTop:{ //配置回到顶部按钮
src : "../lib/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
//offset : 1000
},
isBounce:false
}
});
return mescroll;
}
/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function getListData(page){
var dataIndex=curNavIndex; 
getListDataFromNet(dataIndex, page.num, page.size, function(pageData,totalSize){
mescrollArr[dataIndex].endBySize(pageData.length, totalSize); 
setListData(pageData,dataIndex);
}, function(){
                mescrollArr[dataIndex].endErr();
});
}
function setListData(pageData,dataIndex){
var listDom=document.getElementById("dataList"+dataIndex);
for (var i = 0; i < pageData.length; i++) {
var pd=pageData[i];
var str=""
str+=`<a href="InsuranceDetails/index.html?projectId=${pd.id}"><dl><dt><img src="${pd.imageUrl}" alt=""></dt><dd>
                                <p class="home-insurance-title">${pd.projectName}</p>
                                <p class="home-insurance-subtitle">${pd.projectInfo}</p>
                                <p class="home-insurance-price"><em> ${pd.premium}</em>元/起</p>
                        </dd>
                    </dl></a>`

var liDom=document.createElement("div");
liDom.innerHTML=str;
listDom.appendChild(liDom);
}
}
function getListDataFromNet(curNavIndex,pageNum,pageSize,successCallback,errorCallback) {
                setTimeout(function () {
                    $.ajax({
                type: "POST",
                url: httpServer+"insurance/list",
                headers:{
                    'Access-Control-Allow-Origin':'*'
                }, 
                async:false,
                contentType: "application/json; charset=utf-8",//``+curNavIndex+``
               data: JSON.stringify(insuranceJson(``+curNavIndex+``,pageNum,10)),
                dataType: "json",
                success: function(data){
                    if(data.resCode!='0'){
                                oneError(data)
                    }else{
                    if(data.body!=[]||data.body!=null){
                    var listData=[];
                    successCallback(data.body.insuranceList,data.body.totleRows);
                    }else{

                    }
                    }
                    
                },
                error: errorCallback
            });
                },500)
}


 $("#productStyle li").eq(0).find('span').addClass("inlistActive")
    $('#product-credit-business').show();
    $('#product-credit-banner').show();
    $('#swiper').hide();
    $('#insuranceBanner').hide()
    //$('#swiper').show();
    //$('#insuranceBanner').show()
    $("#productStyle li").click(function() {  
        let styleIndex=$(this).index();
        $("#productStyle li").find('span').removeClass("inlistActive"); 
        $(this).find('span').addClass("inlistActive"); 
        if(styleIndex==0){
            $('#product-credit-business').show();
            $('#product-credit-banner').show();
            $('#swiper').hide();
            $('#insuranceBanner').hide()
        }else{
            $('#product-credit-business').hide();
            $('#product-credit-banner').hide();
            $('#swiper').show();
            $('#insuranceBanner').show()
        }
       
    });  

</script>
</html>